<template>
	<view>
		<view class="clear father">
			
			<view @tap="preview(index)" class="fl pd5 father" v-for="( item , index) in listSync" :key="index"  v-if="index <= count - 1 || count == -1" :style="{width : width + 'px'}">
				<view class="square hover">
					<image :src="item" mode="aspectFill" class="bd whiteBg" :class="isRound ? 'rds' : 'rds4'"></image>
				</view>
				<view class="abs top right pd5" @tap.stop="remove(index)" v-if="!disabled">
					<view class="plr8 wp fz12 hover white rdsTr4" title="删除">x</view>
				</view>
			</view>
			
		</view>
		
		<block v-if="show">
			<swiper class="fixed blackBg w100p h100p z19" :current="current" :circular="true" :indicator-dots="listSync.length > 1" :autoplay="false" :duration="200">
				<swiper-item @tap="show=false" v-for="( item , index) in listSync" :key="index"  v-if="index <= count - 1 || count == -1">
					<image :src="item"  class="w100p h100p" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="fixed flex z20 plr40" @tap="show=false"  v-if="listSync.length > 1">
				<view class="w40" @tap.stop="switchNext(-1)">
					<view class="square">
						<view class="rds wp8 flex ct white hover shadow">
							<view class="bIcon-arrowLeft"></view>
						</view>
					</view>
				</view>
				<view class="w40" @tap.stop="switchNext(1)">
					<view class="square">
						<view class="rds wp8 flex ct white hover shadow">
							<view class="bIcon-arrowRight"></view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name : "images" ,
		props:{
			width : {
				default : 50
			},
			isRound:{
				default : false
			},
			list : {
				default : function(e){
					return [] ;
				}
			},
			count : {
				default : -1
			},
			disabled:{
				default : true 
			},
		},
		data() {
			return {
				show : false ,
				current : 0 ,
				listSync : []
			};
		},
		created() {
			this.listSync = this.getList(this.list);
		},
		watch:{
			list:function(e){
				this.listSync = getList(this.list);
			},
		},
		methods:{
			
			getList:function(value){
				if (value !== 0 && value !== false && !value) {
					return [] ;
				}
				if (Array.isArray(value)) {
					return value ;
				}
				return (value+"").split(",");
			},
			
			switchNext:function(index){
				var nextIndex = this.current + index ;
				if (nextIndex == -1) {
					nextIndex == this.listSync.length -1 ;
				}
				if (nextIndex == this.listSync.length) {
					nextIndex = 0 ;
				}
				this.current = nextIndex ;
				console.log(this.current);
			},
			
			remove:function(index){
				this.$emit("remove" , { detail : {value : index} });
			},
			
			preview:function(index){
				this.current = index ;
				this.show = true ;
			},
		}
	}
</script>

<style>

</style>
